import React, { Component } from "react";
import { Tabs, Pagination } from "antd";
import moment from "moment";
import { playlistDetail, hotComments, newComments } from "../../api/playlist";
import { formatDuration } from "../../utils/format";
import bus from "../../utils/bus";
const { TabPane } = Tabs;
export default class Playlist extends Component {
  constructor() {
    super();

    this.state = {
      activeIndex: "1",
      tableData: [],
      title: "",
      avatarUrl: "",
      coverImgUrl: "",
      signature: "",
      nickname: "",
      tags: [],
      createTime: "",
      // 热门评论
      hotComments: [],
      // 最新评论
      newComments: [],
      // 分页相关数据
      // 最新评论每页数据
      limit: 5,
      // 页码
      page: 1,
      // 热门评论总条数
      hotCommentTotal: 0,
      // 最新评论总条数
      newCommentTotal: 0,
    };
  }
  componentDidMount() {
    this.loadData();
  }
  loadData() {
    const id = this.props.match.params.id;
    this.loadPlaylistDetail(id);
    this.loadHotComments(id);
    this.loadNewComments(id);
  }
  async loadPlaylistDetail(id) {
    const res = await playlistDetail({ id });
    const { code, playlist } = res.data;
    if (code === 200) {
      this.setState({
        tableData: playlist.tracks,
        title: playlist.name,
        avatarUrl: playlist.creator.avatarUrl,
        coverImgUrl: playlist.coverImgUrl,
        signature: playlist.creator.signature,
        nickname: playlist.creator.nickname,
        tags: playlist.tags,
        createTime: moment(playlist.createTime).format("YYYY-MM-DD"),
      });
    }
  }
  async loadHotComments(id) {
    const res = await hotComments({ id });
    const { code, hotComments, total } = res.data;
    if (code === 200) {
      this.setState({
        hotComments,
        hotCommentTotal: total,
      });
    }
  }
  async loadNewComments(id) {
    const { page, limit } = this.state;
    const res = newComments({
      id,
      offset: (page - 1) * limit,
    });
    const {} = res;
    if (code === 200) {
      this.setState({});
    }
  }
  render() {
    return <div>最新音乐详情页</div>;
  }
}
